<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .box {
        padding: 10px;
        width: 500px;
        height: 400px;
        margin: auto;
        background-color: green;
    }

    .info {
        padding: 30px 0 0 0;
    }

    .info li {
        margin-bottom: 10px;
    }

    .info p {
        background-color: pink;
    }
    </style>
</head>

<body>
<div class="box">
    <select id="city">
        <option value="101010100">北京</option>
        <option value="101020100">上海</option>
        <option value="101280101">广州</option>
        <option value="101280601">深圳</option>
    </select>
    <input type="button" value="查询" id="query">
    <!-- 天气 -->
    <div class="info"></div>
</div>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(function() {
    $('#query').click(function() {
        var code = $('#city').val();
        $.ajax({
        	url : 'http://cdn.weather.hao.360.cn/api_weather_info.php',
        	data : {app:'hao360'},
        	jsonp : '_jsonp',
        	jsonpCallback : 'abc',
        	dataType : 'jsonp',
        	success : function(data){ 
        		var w = data.weather; //console.log(data);
        		var tag = '';
        		$.each(w,function(i,e){
        			var date = e.date;
        			var day = e.info.day;
        			var night = e.info.night;

					tag += '<div>'+
								'<span>日期：'+date+'</span>'+
								'<ul>'+
									'<li>白天天气'+day[1]+'</li>'+
									'<li>白天温度'+day[2]+'</li>'+
									'<li>白天风向'+day[3]+'</li>'+
									'<li>白天风速'+day[4]+'</li>'+
								'</ul>'+
								'<ul>'+
									'<li>夜间天气'+night[1]+'</li>'+
									'<li>夜间温度'+night[2]+'</li>'+
									'<li>夜间风向'+night[3]+'</li>'+
									'<li>夜间风速'+night[4]+'</li>'+
								'</ul>'+
							'</div><hr>';
        		}); 
        		$('.info').html(tag);
        	}
        });

    });
})
</script>




</body>

</html>